<!--职业危害因素   hazardsFactor-->
<template>
  <Layout>
    <Form ref="form1" :model="dataToQuery" :label-width="120">
      <Row v-show="!switchFlag" class="query-form2">
        <Col span="8">
          <FormItem label="二级集团：" prop="twoLevelOrgName">
            <Select v-model="dataToQuery.twoLevelOrgName" filterable>
              <Option v-for="item in twoLevelOrgs" :value="item.orgName" :key="item.orgId">{{ item.orgName }}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label='企业名称：'>
            <company-select v-model="dataToQuery.belongCompanyName" style="width:100%"></company-select>
          </FormItem>
        </Col>
        <Col span="8">
          <div style="float: right;">
            <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
            <Button class="ivu-btn-reset" style="margin-left: 10px" @click="reset">重置</Button>
            <Button @click="switchQuery(true)" style="margin-left: 5px" class="ivu-btn-switch2" type="text">展开
              <Icon type="ios-arrow-down"/>
            </Button>
          </div>
        </Col>
      </Row>
      <Row v-show="switchFlag" class="query-form">
        <Col span="8">
          <FormItem label="二级集团：" prop="twoLevelOrgName">
            <Select v-model="dataToQuery.twoLevelOrgName" filterable>
              <Option v-for="item in twoLevelOrgs" :value="item.orgName" :key="item.orgId">{{ item.orgName }}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label='企业名称：'>
            <company-select v-model="dataToQuery.belongCompanyName" style="width:100%"></company-select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="危害因素名称：" prop="content">
            <Input class='query-form-el' placeholder="" type='text' v-model='dataToQuery.name'></Input>
          </FormItem>
        </Col>
      </Row>
      <Row v-show="switchFlag" class="query-form2">
        <Col span="8">
          <FormItem label="危害因素类型：" prop="content">
            <Select class='query-form-el' placeholder="请选择危害因素类型" type='text' v-model='dataToQuery.typeId'>
              <Option v-for="(value,key) in hazardsTypeMap" :value="key" :key="key">{{ value }}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="16">
          <div style="float: right;">
            <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
            <Button class="ivu-btn-reset" style="margin-left: 10px" @click="reset">重置</Button>
            <Button @click="switchQuery(false)" style="margin-left: 10px" class="ivu-btn-switch2" type="text">收起
              <Icon type="ios-arrow-up"/>
            </Button>
          </div>
        </Col>
      </Row>
      <Row class="query-form">
        <Col span="24">
          <Button size="large" :loading='pageStatus.baseDataloading' class="ivu-btn-add" icon="md-add" @click="addInfo">
            新增
          </Button>
          <download-button :api="exportUrl" :queryForm="dataToQuery" />
          <!-- <Button type="primary" class="ivu-btn-add"   icon="md-cloud-download"  @click="exportFormSubmit">导出</Button> -->
        </Col>
      </Row>
    </Form>
    <Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据!" @on-selection-change='getSelectRows'
           :loading='pageStatus.loading || pageStatus.baseDataloading'
           border :columns="columns1" :data="dataTable">
    </Table>
    <Row style="margin-right:10px;">
      <Col span="24">
        <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange"
              @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer
              show-elevator/>
      </Col>
    </Row>
    <Modal title="职业危害因素" :transfer=false :mask-closable="false" v-model="dialogShow"
           v-if="dataToView && dialogShow" :width=500 class-name='limit-height-dialog'>
      <Row>
        <Col span="24">
          <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':''" :show-message="false"
                :model="dataToView" :rules="mode === 'view'?{}:ruleCustom" :label-width="mode === 'view'?190:null"
                :label-position="mode === 'view'?'right':'top'">
            <FormItem label='危害因素名称：' prop='name'>
              <div v-if="mode === 'view'">{{ dataToView.name }}</div>
              <Input v-else class='' placeholder="请填写危害因素名称" type='text' v-model='dataToView.name'></Input>
            </FormItem>
            <FormItem label='危害因素类型：' prop='typeId'>
              <div v-if="mode === 'view'">{{ hazardsTypeMap[dataToView.typeId] }}</div>
              <Select v-else :transfer="true" class='' placeholder="请选择危害因素类型" type='text'
                      v-model='dataToView.typeId'>
                <Option v-for="(value,key) in hazardsTypeMap" :value="key" :key="key">{{ value }}</Option>
              </Select>
            </FormItem>
            <FormItem label='危害因素描述：' prop='notes'>
              <div v-if="mode === 'view'">{{ dataToView.notes }}</div>
              <Input v-else class='' placeholder="请填写危害因素描述" type="textarea" :rows="2"
                     v-model='dataToView.notes'></Input>
            </FormItem>
          </Form>
        </Col>
      </Row>
      <div slot="footer">
        <Button v-if="mode != 'view'" type="primary" class='ivu-btn-save' @click="submit('dialogForm')">确定</Button>
        <Button v-if="mode != 'view'" type="primary" class='ivu-btn-cancel' @click="handleCancel">取消</Button>
        <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
      </div>
    </Modal>
  </Layout>
</template>

<script>
import {Api} from '@/api/index.js'
import pageCommonFunction from '@/components/pageCommonFunction.js'
import {sessionStorage} from "@/common/cacheUtils";
import companySelect from "../../../../components/company-select.vue"
var cascaderDom = () => import('@/components/cascader-dom.vue');

export default {
  components: {
    cascaderDom,companySelect
  },
  data() {
    return {
      ...this.createCommonDataField(),
      defaultLabel: sessionStorage('userId').getObject('userId').companyName,
      orgLists: [],
      userInfo: sessionStorage('userId').getObject('userId'),
      twoLevelOrgs: [],
      orgLoading: false,
      switchFlag: false,
      columns1: [
        {title: '序号', width: 80, fixed: 'left', align: 'center', render: this.indexColumnsRender},
        {key: 'name', title: '危害因素名称', align: 'center'},
        {key: 'notes', title: '危害因素描述', align: 'center'},
        {
          key: 'typeId', title: '危害因素类型', align: 'center', render: (h, params) => {
            return h('span', this.hazardsTypeMap[params.row.typeId])
          }
        },
        this.getActionColumns(),
      ],
      ruleCustom: {
        name: [{required: true, message: '请填写危害因素名称', trigger: 'change',}],
        notes: [{required: true, message: '请填写危害因素描述', trigger: 'change',}],
        typeId: [{required: true, message: '请填写危害因素类型', trigger: 'change',}],
      },
      tableHeight: 10,
      hazardsTypeMap: {},
      // api
      queryUrl: Api.queryHealthApi.replace('{{type}}', 'hazardsFactor'),
      exportUrl: Api.exportHealthApi.replace('{{type}}', 'hazardsFactor'),
      deleteUrl: Api.deleteHealthApi.replace('{{type}}', 'hazardsFactor'),
      bthDeleteUrl: Api.batchDeleteHealthApi.replace('{{type}}', 'hazardsFactor'),
      getUrl: Api.getHealthApi.replace('{{type}}', 'hazardsFactor'),
      updateUrl: Api.updateHealthApi.replace('{{type}}', 'hazardsFactor'),
      saveUrl: Api.saveHealthApi.replace('{{type}}', 'hazardsFactor'),

      // type api
      getAllTypeUrl: Api.getAllHealthApi.replace('{{type}}', 'hazardsType'),
    }
  },
  async mounted() {
    this.setTableHeight();
    this.pageStatus.baseDataloading = true
    await this.$http.get(this.getAllTypeUrl, {}).then((res) => {
      let hazardsTypeMap = {}
      let typeList = res.data.data
      for (let i = 0, il = typeList.length; i < il; i++) {
        let typeObj = typeList[i]
        hazardsTypeMap[typeObj.id] = typeObj.name
      }
      this.hazardsTypeMap = hazardsTypeMap
    }, (res) => {
    }).catch(e => {
    })
    this.pageStatus.baseDataloading = false
    this.query();
    this.queryTwoOrgInfo();
  },
  methods: {
    ...pageCommonFunction,
    queryTwoOrgInfo() {
      if (sessionStorage('userId').getObject('userId').companyId != '18000000') {
        this.twoLevelOrgs.push({
          orgId: sessionStorage('userId').getObject('userId').twoLevelOrgId,
          orgName: sessionStorage('userId').getObject('userId').twoLevelOrgName
        });
      } else {
        this.$http.get(Api.quqeryTwoOrgInfo).then(res => {
          this.twoLevelOrgs = res.data.data
        }).catch(e => {
        })
      }
    },
    deleteData(params) {
      this.deleteDateAjax(params);
    },
    query() {
      this.queryAjax();
    },
    submit(name) {
      this.submitAjax(name);
    },
  },
  watch: {},
}
</script>

<style lang='css' scoped>
.rpt-form {
}

/deep/ .rpt-form .query-form-el {
  width: 100%;
}

/deep/ .rpt-form .ivu-form-item {
  margin-bottom: 24px;
}

</style>
